import SEO from '../components/SEO'

<SEO
  title="Tooltip"
  description="A tooltip is a brief, informative message that appears when a user interacts with an element. Tooltips are usually initiated in one of two ways: through a mouse-hover gesture or through a keyboard-hover gesture."
/>

# Tooltip

A tooltip is a brief, informative message that appears when a user interacts with an element. Tooltips are usually initiated in one of two ways: through a mouse-hover gesture or through a keyboard-hover gesture.

The Tooltip component follows the [WAI-ARIA](https://www.w3.org/TR/wai-aria-practices/#tooltip) Tooltip Pattern.

<carbon-ad />

## Import

<br />

```js
import { CTooltip } from "@chakra-ui/vue";
```

## Usage

If the child of `CTooltip` is a string, we wrap it inside a span and set the `tab-index` attribute to `0` to ensure it meets the accessibility requirements.

```vue live=true
<c-tooltip label="Chakra UI rocks">Psst! Hover Me</c-tooltip>
```

### With an icon

```vue live=true
<c-tooltip label="Welcome home" placement="bottom">
  <c-icon name="phone" />
</c-tooltip>
```

### With arrow

```vue live=true
<c-tooltip has-arrow label="Add new component" placement="right">
  <c-icon name="add" />
</c-tooltip>
```

### Tooltip with focusable content

If the children of `CTooltip` is a focusable element, the tooltip will show when you focus or hover on the element, and will hide when you blur or moves cursor out of the element.

```vue live=true
<c-tooltip has-arrow label="Add order to cart" placement="top" bg="blue.600">
  <c-button>Place order</c-button>
</c-tooltip>
```

### Placement

Using the `placement` prop you can adjust where your tooltip will be displayed.

```vue live=true
<c-stack should-wrap-children>
  <c-tooltip has-arrow label="left" placement="left">
    <c-button>Left</c-button>
  </c-tooltip>

  <c-tooltip has-arrow label="top" placement="top">
    <c-button>Top</c-button>
  </c-tooltip>

  <c-tooltip has-arrow label="right" placement="right">
    <c-button>Right</c-button>
  </c-tooltip>

  <c-tooltip has-arrow label="bottom" placement="bottom">
    <c-button>Bottom</c-button>
  </c-tooltip>
</c-stack>
```

### Props

| Name                 | Type                 | Default  | Description                                                                           |
| -------------------- | -------------------- | -------- | ------------------------------------------------------------------------------------- |
| `isOpen`             | `boolean`            |          | If `true`, the tooltip is shown.                                                      |
| `defaultIsOpen`      | `boolean`            |          | If `true`, the tooltip is initially shown.                                            |
| `label`              | `string`             |          | The label of the tooltip.                                                             |
| `aria-label`         | `string`             |          | An alternate label for screen readers.                                                |
| `placement`          | `PopperJS.Placement` | `bottom` | Position the tooltip relative to the trigger element as well as surrounding elements. |
| `hasArrow`           | `boolean`            |          | If `true` display an arrow tip on the tooltip.                                        |
| `showDelay`          | `number`             |          | The delay in `ms` for the tooltip to show                                             |
| `hideDelay`          | `number`             |          | The delay in `ms` for the tooltip to hide                                             |
| `closeOnClick`       | `boolean`            |          | If `true` hide the tooltip, when the trigger is clicked.                              |
| `shouldWrapChildren` | `boolean`            |          | If `true`, the tooltip will wrap the children in a `span` with `tabindex=0`           |

### Slots

| Name    | Description                                     |
| ------- | ----------------------------------------------- |
| default | Element to around which the tooltip is anchored |

### Events

| Name     | Payload | Description                             |
| -------- | ------- | --------------------------------------- |
| `@open`  | -       | Function called when the tooltip shows. |
| `@close` | -       | Function called when the tooltip hides. |
